<template>
  <div class="info_container text-none marginBottom15">
    <div
      class="
        container_cardInfo
        info_containerPadding info_containerBacInfoStyle
      "
    >
      <div class="timerOrCity flex-top">
        <div class="left_City">
          <h1 class="leftMax_city">{{ cityPosition.name + "区" }}</h1>
          <span class="leftMin_city">{{ cityPosition.adm2 }}</span>
          <i style="padding: 0 0.03rem">/</i>
          <span class="leftMin_city">{{ cityPosition.adm1 }}</span>
        </div>
        <div class="right_time">
          <span class="rightTime_text">{{ time }}</span>
        </div>
      </div>

      <div class="temperature_cardInfo">
        <i
          class="temperature_icon"
          :class="'qi-' + positionCity.icon + '-fill'"
          :style="colorStyle"
        ></i>
        <div class="temperature_title">
          <span class="temperature_number" :style="colorStyle">{{
            positionCity.temp
          }}</span>
          <p class="temperature_text">{{ positionCity.text }}</p>
        </div>
      </div>

      <div class="temperature_titleText">
        <p class="temperature_feelsLike">
          今天体感温度：
          <span class="temperature_feelsLikeNumber" :style="colorStyle">{{
            positionCity.feelsLike
          }}</span>
          {{
            positionCity.feelsLike >= is_temperature
              ? "注意防范，避免中暑"
              : "温度不是很高"
          }}
        </p>
      </div>

      <WarningInfo />

      <div class="other_info flex-left">
        <div class="direction_info">
          <p>{{ positionCity.windScale + "级" }}</p>
          <p>{{ positionCity.windDir }}</p>
        </div>
        <div class="direction_info">
          <p>{{ positionCity.humidity + "%" }}</p>
          <p>相对湿度</p>
        </div>
        <div class="direction_info">
          <p>{{ positionCity.precip + "mm" }}</p>
          <p>小时降水量</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
//
import { currTime } from "../../../utils/tools";
//
import WarningInfo from "../warningInfo/WarningInfo";
export default {
  name: "WeatherMainInfo",
  components: {
    WarningInfo,
  },
  data() {
    return {
      is_temperature: 30,
    };
  },
  computed: {
    ...mapState(["positionCity", "cityPosition"]),
    colorStyle() {
      return this.positionCity.temp >= this.is_temperature
        ? "color: rgba(220, 53, 69, 1)"
        : "color: rgba(40, 167, 69, 1)";
    },
    time() {
      return currTime(this.positionCity.obsTime);
    },
  },
};
</script>

<style scoped>
.info_container {
  width: 100%;
  height: auto;
}

.info_container .container_cardInfo {
  background-image: -webkit-linear-gradient(
    225deg,
    #fee5ca,
    #e9f0ff 55%,
    #dce3fb
  );
  background-image: -o-webkit-linear-gradient(
    225deg,
    #fee5ca,
    #e9f0ff 55%,
    #dce3fb
  );
  background-image: -moz-linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
  background-image: linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
}
.info_container .container_cardInfo .timerOrCity {
  width: 100%;
  font-size: 0.14rem;
  justify-content: space-between;
  margin-bottom: 0.2rem;
  align-items: flex-end;
}
.info_container .container_cardInfo .timerOrCity .left_City .leftMax_city {
  display: inline-block;
  font-size: 0.22rem;
  margin-right: 0.06rem;
}
.info_container .container_cardInfo .temperature_cardInfo {
  width: 100%;
  text-align: center;
  line-height: 0.35rem;
  margin-bottom: 0.3rem;
}

.info_container .container_cardInfo .temperature_cardInfo .temperature_icon {
  font-size: 0.7rem;
  margin-right: 0.1rem;
}

.info_container .container_cardInfo .temperature_cardInfo .temperature_title {
  display: inline-block;
  text-align: left;
}
.info_container
  .container_cardInfo
  .temperature_cardInfo
  .temperature_title
  .temperature_number {
  position: relative;
  font-size: 0.45rem;
}
.info_container
  .container_cardInfo
  .temperature_cardInfo
  .temperature_title
  .temperature_text {
  font-size: 0.15rem;
}

.temperature_number::after {
  content: "°";
  position: absolute;
  top: 0;
  font-size: 0.35rem;
}

.info_container .container_cardInfo .temperature_titleText {
  margin-bottom: 0.3rem;
}
.info_container
  .container_cardInfo
  .temperature_titleText
  .temperature_feelsLike {
  text-align: center;
  font-size: 0.15rem;
}
.info_container
  .container_cardInfo
  .temperature_titleText
  .temperature_feelsLike
  .temperature_feelsLikeNumber {
  display: inline-block;
  position: relative;
  padding-right: 0.05rem;
}
.temperature_feelsLikeNumber::after {
  content: "°";
  position: absolute;
  top: 0;
}

.info_container .container_cardInfo .other_info {
  width: 100%;
  height: auto;
  border-radius: 0.12rem;
  background-color: rgba(160, 166, 180, 0.3);
  padding: 0.1rem 0.45rem;
  justify-content: space-between;
}
.info_container .container_cardInfo .other_info .direction_info {
  text-align: center;
}
.info_container .container_cardInfo .other_info .direction_info p {
  font-size: 0.15rem;
  line-height: 0.3rem;
}
</style>